<template>
  <view class="pos-order-list" ref="container">
    <!-- #ifdef MP || APP-PLUS -->
    <NavBar titleText="订单管理" bagColor="#f5f5f5" :iconColor="iconColor" :textColor="iconColor"
            :isScrolling="isScrolling" showBack></NavBar>
    <!-- #endif -->
    <view class="searchCon acea-row">
      <view class="search acea-row row-middle">
        <text class="iconfont icon-ic_search"></text>
        <input class="inputs" placeholder='请输入订单号' placeholder-style="font-size:28rpx"
               placeholder-class='placeholder' confirm-type='search'
               name="search" v-model="searchListData.orderNo" @confirm="searchSubmit"></input>
      </view>
      <view class="btn" @click="filterShow = true">
        <text class="iconfont icon-a-icon_filter1x"></text>
      </view>
    </view>
    <view :style="{ height: navHeight + 'px' }" v-if="isFixed"></view>
    <!-- #ifdef MP -->
    <view class="nav acea-row row-around row-middle" :style="{
			top:getHeight.barTop+getHeight.barHeight+'px'
		}" id="nav">
      <!-- #endif -->
      <!-- #ifndef MP -->
      <view class="nav acea-row row-around row-middle" id="nav">
        <!-- #endif -->
        <scroll-view scroll-x="true" class="scroll_view">
          <view class="item" :class="state == 'all' ? 'on' : ''" @click="changeStatus('all')">
            全部({{ headerArr['all'] != undefined ? headerArr['all'] : 0 }})
            <image src="../static/adorn.png" v-if="state == 'all'"></image>
          </view>
          <view class="item" :class="state == 'notShipped' ? 'on' : ''" @click="changeStatus('notShipped')">
            待发货({{ headerArr['notShipped'] != undefined ? headerArr['notShipped'] : 0 }})
            <image src="../static/adorn.png" v-if="state == 'notShipped'"></image>
          </view>
          <view class="item" :class="state == 'spike' ? 'on' : ''" @click="changeStatus('spike')">
            待收货({{ headerArr['spike'] != undefined ? headerArr['spike'] : 0 }})
            <image src="../static/adorn.png" v-if="state == 'spike'"></image>
          </view>
          <view class="item" :class="state == 'awaitVerification' ? 'on' : ''"
                @click="changeStatus('awaitVerification')">
            待核销({{ headerArr['verification'] != undefined ? headerArr['verification'] : 0 }})
            <image src="../static/adorn.png" v-if="state == 'awaitVerification'"></image>
          </view>
          <view class="item" :class="state == 'receiving' ? 'on' : ''" @click="changeStatus('receiving')">
            已收货({{ headerArr['receiving'] != undefined ? headerArr['receiving'] : 0 }})
            <image src="../static/adorn.png" v-if="state == 'receiving'"></image>
          </view>
          <view class="item" :class="state == 'complete' ? 'on' : ''" @click="changeStatus('complete')">
            已完成({{ headerArr['complete'] != undefined ? headerArr['complete'] : 0 }})
            <image src="../static/adorn.png" v-if="state == 'complete'"></image>
          </view>
          <view class="item" :class="state == 'refunded' ? 'on' : ''" @click="changeStatus('refunded')">
            已退款({{ headerArr['refunded'] != undefined ? headerArr['refunded'] : 0 }})
            <image src="../static/adorn.png" v-if="state == 'refunded'"></image>
          </view>
          <view class="item" :class="state == 'deleted' ? 'on' : ''" @click="changeStatus('deleted')">
            已删除({{ headerArr['deleted'] != undefined ? headerArr['deleted'] : 0 }})
            <image src="../static/adorn.png" v-if="state == 'deleted'"></image>
          </view>
        </scroll-view>
      </view>
      <view class="list" v-if="list.length">
        <view class="item" v-for="(item, index) in list" :key="index">
          <view class="order-num acea-row row-between-wrapper" @click="toDetail(item)">
            <view>
              <view class="title">
<!--                <view class="type">{{ orderType[item.type] }}</view>-->
                {{ item.orderNo }}
              </view>
            </view>
            <view class="state" v-if="item.refundStatus==3">
              已退款
            </view>
            <view class="state"
                  v-else-if="item.groupBuyRecordStatus===99||item.groupBuyRecordStatus===10|| item.status == 9">
              {{ orderStatus[item.status] }}
            </view>
            <view class="state" v-else>
              {{ item.groupBuyRecordStatus == 0 ? '拼团中' : '拼团失败' }}
            </view>
          </view>
          <view class="pos-order-goods">
            <view class="goods acea-row" @click="toDetail(item)">
              <scroll-view class="picTxt scroll-view" scroll-x="true"
                           v-if="item.infoResponseList.length > 1">
                <view class="pictrue" v-for="(val, key) in item.infoResponseList" :key="key">
                  <image :src="val.image"/>
                </view>
              </scroll-view>
              <view class="picTxt" v-else>
                <view class="acea-row" v-for="(val, key) in item.infoResponseList" :key="key">
                  <view class="pictrue">
                    <image :src="val.image"/>
                  </view>
                  <view class="text info-text">
                    <view class="info line2">
                      {{ val.productName }}
                    </view>
                    <view class="attr">
                      {{ val.sku }}
                    </view>
                  </view>
                </view>
              </view>
              <view class="money">
                <baseMoney :money="item.payPrice" symbolSize="20" integerSize="32" decimalSize="20">
                </baseMoney>
                <view class="num">共{{ item.totalNum }}件</view>
              </view>
            </view>
          </view>
          <view class="operation acea-row row-between-wrapper">
            <view class="more">
            </view>
            <view class="acea-row row-middle">
              <view class="bnt" v-if="item.groupBuyRecordStatus==10||item.groupBuyRecordStatus==99"
                    @click="modify(item, 1)">订单备注
              </view>
              <view class="bnt primary"
                    v-if="[1,2].includes(item.status)&&item.refundStatus!=3&&(item.groupBuyRecordStatus==10||item.groupBuyRecordStatus==99)"
                    @click="goDelivery(item)">立即发货
              </view>
              <!-- <navigator class="bnt primary" :url="'/pages/admin/logistics/index?orderId='+item.order_id"
                v-if="item._status == 4 && item.delivery_type == 'express'&&item.refundStatus!=3">发货记录
              </navigator> -->
              <view class="bnt primary" v-if="item.status==3&&item.refundStatus!=3&&item.groupBuyRecordStatus==99"
                    @click="verify(item)">
                立即核销
              </view>
              <view class="bnt primary" v-if="item.status==3&&item.groupBuyRecordStatus==10&&item.refundStatus!=3"
                    @click="verify(item)">
                立即核销
              </view>
            </view>
          </view>
        </view>
      </view>
      <emptyPage v-else title="暂无订单～" :imgSrc="urlDomain+'crmebimage/presets/noShopper.png'"></emptyPage>
      <Loading :loaded="loaded" :loading="loading"></Loading>
      <PriceChange :change="change" :orderInfo="orderInfo" :isRefund="isRefund"
                   v-on:statusChange="statusChange($event)" v-on:closechange="changeclose($event)"
                   v-on:savePrice="savePrice" :status="status"></PriceChange>
      <view class="mask" v-if="filterShow" @click="filterShow=!filterShow"></view>
      <!-- #ifdef H5 -->
      <view class="filter-popup" :class="{ on: filterShow }">
        <!-- #endif -->
        <!-- #ifndef H5 -->
        <view class="filter-popup" :class="{ on: filterShow }" :style="{
			top:getHeight.barTop+getHeight.barHeight+'px'}">
          <!-- #endif -->
          <view class="search-box">
            <view class="search acea-row row-middle">
              <text class="iconfont icon-ic_search"></text>
              <input class="input" placeholder='请输入要查询的订单' placeholder-style="font-size:28rpx"
                     placeholder-class='placeholder'
                     confirm-type='search' name="search" v-model="searchListData.orderNo"
                     @confirm="searchSubmit"></input>
            </view>
          </view>
          <view class="content">
            <view class="item">
              <view class="title">按下单时间</view>
              <view class="acea-row list">
                <view class="cell" v-for="(item, index) in dateList" :key="index"
                      :class="{ on: item.val == dateSelected }" @click="dateChange(item.val)">{{ item.label }}
                </view>
              </view>
            </view>
<!--            <view class="item">-->
<!--              <view class="title">按订单类型</view>-->
<!--              <view class="acea-row list">-->
<!--                <view class="cell" v-for="(item, index) in payList" :key="index"-->
<!--                      :class="{ on: item.val === searchListData.type }" @click="payChange(item.val)">-->
<!--                  {{ item.label }}-->
<!--                </view>-->
<!--              </view>-->
<!--            </view>-->
            <view class="bottom">
              <view class="no_view" @click="resetBtn">重置</view>
              <view class="yes_view" @click="submitBtn">确定</view>
            </view>
          </view>
        </view>
        <view v-if="confirmShow" class="mask"></view>
        <view v-if="confirmShow" class="confirm-popup">
          <view class="title">确认付款</view>
          <view class="info">确认该订单用户已付款</view>
          <view class="acea-row btn-box">
            <view class="btn" @click="confirmShow = false">取消</view>
            <view class="btn primary" @click="offlinePay">确认</view>
          </view>
        </view>
        <view class="footerH"></view>
        <footerPage></footerPage>
      </view>
</template>

<script>
// import UniDatetime from '../components/uni-datetime-picker/components/uni-datetime-picker/uni-datetime-picker.vue'
import Loading from '../components/Loading/index'
import PriceChange from '../components/PriceChange/index.vue'
import footerPage from '../components/footerPage/index.vue'
import countDown from '@/components/countDown/index.vue'
import emptyPage from '@/components/emptyPage.vue'
import baseMoney from '../components/BaseMoney.vue'
// #ifdef MP || APP-PLUS
import NavBar from '../components/NavBar.vue';
// #endif
import {
  isMoney
} from '@/utils/validate.js';
import {
  HTTP_REQUEST_URL
} from '@/config/app';
import {
  employeeOrderList,
  employeeOrderMark,
  orderStatusNum,
  employeeOrderInfo,
  orderGetVerfication
} from '@/api/work.js';

export default {
  name: "AdminOrderList",
  components: {
    Loading,
    PriceChange,
    footerPage,
    countDown,
    emptyPage,
    baseMoney,
    // #ifdef MP || APP-PLUS
    NavBar,
    // #endif
  },
  data() {
    return {
      urlDomain: this.$Cache.get("imgHost"),
      datetimerange: [],
      // orderType: ['普通', '秒杀', '拼团'],
      orderStatus: ['待支付', '待发货', '部分发货', '待核销', '待收货', '已收货', '已完成', '已取消'],
      getHeight: this.$util.getWXStatusHeight(),
      iconColor: '#333333',
      isScrolling: false,
      top: 0,
      navHeight: 0,
      isFixed: false,
      filterShow: false,
      current: "",
      change: false,
      types: 0,
      list: [],
      loaded: false,
      loading: false,
      orderInfo: {},
      status: "",
      state: 'all',
      isRefund: 0, //1是仅退款;0是退货退款
      imgHost: HTTP_REQUEST_URL,
      dateSelected: '1',
      dateList: [{
        label: '全部',
        val: '1',
      },
        {
          label: '近1个月',
          val: '2',
        },
        {
          label: '近3个月',
          val: '3',
        },
        {
          label: '近6个月',
          val: '4',
        },
      ],
      payList: [
        {
          label: '全部订单',
          val: '',
        },
        {
          label: '普通订单',
          val: 0,
        },
        {
          label: '秒杀订单',
          val: 1,
        },
        {
          label: '拼团订单',
          val: 2,
        }
      ],
      confirmOrder: {},
      confirmShow: false,
      searchListData: {
        dateLimit: '',
        limit: 10,
        merId: '',
        orderNo: '',
        page: 1,
        status: 'all',
        type: '',
      },
      headerArr: {},
      totalPage: '',
    };
  },
  onLoad(options) {
    this.state = options.type ? options.type : 'all';
    this.searchListData.status = options.type ? options.type : 'all';
  },
  // created() {
  // 	this.getInitList()
  // 	this.statusHeader()
  // },
  onShow() {
    this.searchListData.page = 1
    this.getInitList()
    this.statusHeader()
  },
  methods: {
    //订单表头数量
    statusHeader() {
      orderStatusNum(this.searchListData).then(res => {
        this.headerArr = res.data
      })
    },
    // 订单搜索
    searchSubmit() {
      this.searchListData.page = 1
      this.getInitList()
      this.statusHeader()
    },
    //订单列表
    getInitList(type) {
      employeeOrderList(this.searchListData).then(res => {
        //下拉触底
        if (type == 'bottom') {
          this.list = this.list.concat(res.data.list)
        } else {
          this.list = res.data.list
        }
        this.totalPage = res.data.totalPage
      }).catch(err => {
        this.$util.Tips({
          title: err
        })
      })
    },
    toDetail(item) {
      if (item.groupBuyRecordStatus === 0) {
        return this.$util.Tips({
          title: '拼团中无法查看详情'
        })
      } else {
        uni.navigateTo({
          url: `/pages/admin/order/detail?orderNo=${item.orderNo}`
        })
      }
    },
    //发送货
    goDelivery(item) {
      if (item.refundStatus == 1) return this.$util.Tips({
        title: '请处理售后，再操作',
      });
      uni.navigateTo({
        url: `/pages/admin/order/send?orderNo=${item.orderNo}`
      })
    },
    // 商品操作
    modify: function (item, status, type) {
      this.change = true;
      this.status = status.toString();
      this.orderInfo = item;
      if (status == 2) {
        this.isRefund = type
      }
    },
    //核销
    verify(item) {
      employeeOrderInfo(item.orderNo).then(res => {
        let verifyCode = res.data.verifyCode
        orderGetVerfication({
          verifyCode: res.data.verifyCode
        }).then(res => {
          if (res.code == 200) {
            uni.navigateTo({
              url: `/pages/admin/cancel/list?info=${JSON.stringify(res.data)}&verifyCode=${verifyCode}`
            })
          } else {
            self.$util.Tips({
              title: res.message
            });
          }
        })
      })
    },
    changeclose: function (msg) {
      this.change = msg;
    },
    async savePrice(opt) {
      if (!opt.remark) {
        return this.$util.Tips({
          title: '请输入备注'
        })
      } else {
        this.toMark(this.orderInfo.orderNo, opt.remark)
      }
    },
    //备注
    toMark(orderNo, remark) {
      employeeOrderMark({
        orderNo,
        remark
      }).then(res => {
        res.code == 200 && (this.change = false);
        return this.$util.Tips({
          title: '备注成功'
        })
      })
    },
    // 导航切换
    changeStatus(val) {
      if (this.state != val) {
        this.state = val;
        // this.where.status = val == -1 ? '' : val;
        this.searchListData.status = val
        this.searchListData.page = 1
        this.searchListData = {...this.searchListData}
        this.getInitList()
      }
    },
    dateChange(value) {
      if (value == 1) {
        this.searchListData.dateLimit = ''
        this.dateSelected = value;
        return
      } else if (value == 2) {
        this.searchListData.dateLimit = 'lately30'
      } else if (value == 3) {
        this.searchListData.dateLimit = 'lately90'
      } else if (value == 4) {
        this.searchListData.dateLimit = 'lately180'
      }
      this.dateSelected = value;
    },
    payChange(val) {
      this.searchListData.type = val;
    },
    // 点击确认按钮
    submitBtn() {
      this.filterShow = false;
      this.searchListData.page = 1
      this.getInitList()
      this.statusHeader()
    },
    //点击重置按钮
    resetBtn() {
      this.searchListData.orderNo = ''
      this.searchListData.dateLimit = ''
      this.searchListData.type = '';
      this.dateSelected = '1'
    }
  },
  onReachBottom() {
    this.searchListData.page += 1
    this.totalPage >= this.searchListData.page && this.getInitList('bottom')
  }
}
</script>

<style lang="scss" scoped>
@import '../style/admin_order.scss';
</style>